<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <meta content="emai=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/css/group.css" />
    <title>芝士社团</title>
    <style>
        /*Swiper Start*/
        .swiper-slide > img {
            display: inherit;
            width: 100%;
        }

        .swiper-pagination {
            width: 100%;
        }

        .swiper-pagination-bullet {
            background-color: #feed7a;
            border: 1px solid #000;
            -moz-background-clip: padding-box;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            opacity: 0.8;
        }

        .swiper-pagination-bullet-active {
            background-color: #fd8965;
        }
        /*Swiper End*/

        /*Tabs Start*/
        .nav-l {
            position: relative;
            background-color: #fff;
        }

            .nav-l ul {
                border-bottom: 1px solid #e2e2e2;
                background-color: #fff;
            }

            .nav-l li {
                font-size: 1.5rem;
                text-align: center;
                margin-top: 3px;
                padding: 15px 0;
            }

                .nav-l li a {
                    border-left: 1px solid #e2e2e2;
                    display: block;
                    color: #2d2d2d;
                    text-align: center;
                }

                .nav-l li:first-child a {
                    border-left: none;
                }

                .nav-l li .icon {
                    margin-bottom: 8px;
                    width: 32px;
                    height: 32px;
                }
        /*Tabs End*/
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img data-href="#" src="/img/list-img1.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                    <img data-href="#" src="/img/list-img2.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                    <img data-href="#" src="/img/list-img3.jpg" alt="" />
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="nav-l">
            <ul class="flex-wrapper">
                <li class="flex-1"><a href="/organization/guide"><span class="icon i-greenhand"></span><br />新手指南</a></li>
                <li class="flex-1"><a href="/organization/notice"><span class="icon i-report"></span><br />社团准则</a></li>
                <li class="flex-1"><a href="/organization/list"><span class="icon i-group"></span><br />社团列表</a></li>
            </ul>
        </div>
        <div class="g-list">
            <header data-href="/user/organization">
                <span class="icon i-viewAll s-right"></span>我的社团
            </header>
            <?php if($list):?>
            <ul class="g-list-group">
            	<?php foreach ($list as $item):?>
                <li class="g-list-item" data-href="/organization/detail?id=<?php echo $item['organization_id']?>&type=3">
                    <div class="flex-wrapper flex-align-center">
                        <div class="g-list-left">
                            <span class="avatar">
                                <img src="<?php echo STATIC_IMAGE . $item['icon']?>" />
                            </span>
                        </div>
                        <div class="g-list-right flex-1">
                            <p class="g-list-title">
                                <span class="s-right <?php echo $item['class']?>"><?php echo $item['join_info']?></span>
                              <?php echo $item['organization_name']?>
                            </p>
                            <p class="g-list-desc interception"><?php echo $item['description']?></p>
                        </div>
                    </div>
                </li>
                <?php endforeach;?>
            </ul>
            <?php else:?>
            <div class="no-result">
                <img src="/img/no_group.png" /><br/>
                <img class="goto" src="/img/txt_gotoshop.png" /><br />
                <a class="goto" href="/organization/list">社区大本营</a>
            </div>
            <?php endif;?>
        </div>
    </div>
    <script src="/js/zepto-1.1.6.js" type="text/javascript"></script>
    <script src="/js/lazyload.js" type="text/javascript"></script>
    <script src="/js/swiper.min.js" type="text/javascript"></script>
    <script src="/js/common.js" type="text/javascript"></script>
    <script>
        $(function () {
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                loop: true
            });
            resetSize($(".swiper-wrapper"));
        });
    </script>
</body>
</html>
